<!DOCTYPE html>
<html>
<head>
    <title>轻便，拾光</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telephone=no, email=no" />

    <link rel="shortcut icon" href="favicon.png" />
    <link rel="stylesheet" href="stylesheets/screen.css">
    <link rel="stylesheet" href="stylesheets/jquery.fullPage.css">
</head>
<body>
	<div id="dowebok">
		<!-- section：下载 -->
	    <div class="section section_top fp-auto-height" >
	        <div class="section_top" id="home">
				<div class="header widthAuto">
					<div class="show_desktop logo">
						<img src="img/logo.png">
					</div>
					<!-- <img class="show_phone menu" src="img/iconfont-menu.png"> -->
					<ul class="nav">
						<li class="active" onclick="navActive()"><a href="#home">HOME/首页</a></li>
						<li><a href="timepicker.cn/login">ONLINE/在线使用</a></li>
					</ul>
				</div>
				<div class="download">
					<div class="show_desktop logo_box">
						<img  src="img/erweima.png">
						<h1>扫描二维码安装</h1>
					</div>
					<div class="show_phone logo_box">
						<img  src="img/ptime_logo.png">
					</div>
					<div class="btn">
						<a class="android left active"><img src="img/android.png">下载安卓版</a>
						<a class="ios right"><img src="img/apple.png">下载IOS版</a>
					</div>
				</div>
			</div>
	    </div>
	    <!--section：定义你的通知方式 -->
	    <div class="section">
	    	<div class="bg" style="top:0;margin-bottom:0px">
				<img src="img/section1_bg.png">
			</div>
			<div class="content content2">
				<div class="intro_word left">
					<h1 class="title">定义你的通知方式</h1>
					<p>提供拾光，微信，邮件，短信，电话五种通知方式</br>
					自定义通知方式，轻松接收每一条通知</p>
				</div>
				<div class="intro_pic right">
					<img src="img/section1.png">
				</div>
			</div>
	    </div>
	    <!-- section：回复结果自动统计 -->
	    <div class="section">
	    	<div class="content content3">
	    		<div class="intro_word right">
					<h1 class="title">回复结果自动统计</h1>
					<p>图文展示，回复结果一目了然</p>
				</div>
				<div class="intro_pic left">
					<img src="img/section2.png">
				</div>
	    	</div>
	    	<div class="bg" style="bottom:0px;">
				<img src="img/section2_bg.png">
			</div>
	    </div>
	    <!-- section:汇聚你的个人日程 -->
	    <div class="section">
			<div class="content content4">
				<div class="intro_word left">
					<h1 class="title">汇聚你的个人日程</h1>
					<p>汇聚活动，考试，课表，上映，放假等日程</br>
					拾光生活。轻松便捷</p>
				</div>
				<div class="intro_pic right">
					<img src="img/section3.png">
				</div>
			</div>
			<div class="bg" style="bottom:0;">
				<img src="img/section3_bg.png">
			</div>
	    </div>
	    <!-- section：发现你的通知场景 -->
		<div class="section">
			<div class="content content5">
				<div class="intro_word right">
					<h1 class="title">发现你的通知场景</h1>
					<p>不断更新完善的app，在这里定制你的拾光</br>
					高效管理，轻松合作</p>
				</div>
				<div class="intro_pic left">
					<img src="img/section4.png">
				</div>
			</div>
			<div class="bg  show_desktop" style="bottom:0;">
				<img src="img/section4_bg.png">
			</div>
		</div>	
		<!-- section:扫描下载 -->
		<div class="section section5 fp-auto-height">
			<div class="show_desktop">
				<div class="right">
					<img src="img/erweima.png">
					<h3>手机扫描下载</h3>
					<a href="timepicker.cn/login">在线使用</a>
				</div>
			</div>
			<div class="footer ">
				<div class="clear">
					<div class="left">
						<img class="left" src="img/ptime_logo.png">
					</div>
					<div class="right">
						<!-- <ul>
							<li><a href=""></a></li>
							<li><a href=""></a></li>
							<li><a href=""></a></li>
						</ul> -->
						<div style="height:30px;"></div>
						<p>Powered by <a src="yantukeji.com" style="font-weight:700;display:inline-block;">yantukeji.com </a></p>
						<p>河北省秦皇岛市海港区</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.fullPage.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script>
	$(function(){
	    $('#dowebok').fullpage({
	    	sectionsColor : ['#EEF7F8', '#ECF5F6', '#ECF5F6', '#E5F2F3','#ECF5F6','#E5F2F3'],
	        'navigation': true,
			navigation: !0,
	        onLeave: function(index, nextIndex, direction){
	        	if ($(window).width()>480) {
	        		if (nextIndex%2==1) {
	        			//右边图
	    				setTimeout(function(){
		        			$(".content"+index+" .intro_pic").css({right:'-80%'});
		        		},680)
						$(".content"+nextIndex+" .intro_pic").animate({
							left:0
						}, 680);
	        		}else if(nextIndex!=6){
	        			// 左边图
	        			setTimeout(function(){
		        			$(".content"+index+" .intro_pic").css({left:'-80%'});
		        		},680)
						$(".content"+nextIndex+" .intro_pic").animate({
							right:0
						}, 680);
	        		};
	        	}else{
	        		if (nextIndex%2==1) {
	        			//右边图
	        			setTimeout(function(){
		        			$(".content"+index+" .intro_pic").animate({
								right:'-200%',
								bottom:'-200%'
							}, 680);
		        		},680)
						$(".content"+nextIndex+" .intro_pic").animate({
							left:0,
							bottom:0
						}, 680);
	        		}else if(nextIndex!=6){
	        			// 左边图
	        			setTimeout(function(){
		        			$(".content"+index+" .intro_pic").animate({
								left:'-200%',
								bottom:'-200%'
							}, 680);
		        		},680)
						$(".content"+nextIndex+" .intro_pic").animate({
							right:0,
							bottom:0
						}, 680);
	        		};
	        	};
	        }
	    });
	});
	</script>
</body>